<html>
<head>
<title>Teclado Virtual</title><title>Excel 7</title>

<style>
.teclado{
 width:100px;
 height:100px;
 border:2px solid blue;
 background-color:orange;
 border-radius:10px;
 left:200px;
 position:absolute;
left:250px;
}

.botao{
width:25px;
heigth:5px;
background-color:white;
}
</style>

<script language="javascript" type="text/javascript">

<!-- funcao java script a funcao mostra teclado serve apenas para mostrar o teclado com o usuario acionar o focus para o campo senha !-->
function mostrarTeclado( ){
	document.getElementById('valor').style.display="block";
 };
 
<!-- funcao java script pegar Numero ela pega o valor do botao que o usuario clicou ele vem o valor dele vem atravez do (btn) !-->
function pegarNumero(btn){
    
  <!-- a variavel senha esta recebendo valor  do compo senha!-->
  var senha = document.getElementById('txtSenha').value;
  
  <!-- Aqui vocï¿½ define a quantidade de caracteres no campo senha, nessa caso o usuario so vai conseguir colocar 8 digitos!-->
  
  if(senha.length<8){
  
    <!-- o campo txtSenha esta recebendo a senha mais o valor que esta nela e mais o valor que o usuario clicou no botao (btn)!-->
    document.getElementById('txtSenha').value =senha +=btn.value;
  };
 };
 
</script>
</head>
<body>
	  <!-- Crie um formulario -->
	<form name="exercicio">
	<label style="font-size:30px">Teclado virtual com Java Script</label></br></br>
	Nome : <input type="text" id="txtNome"/>
		  <!-- Crie um campo text so para vocï¿½s verem que o teclado consegue pegar o valor que o usuario clicou no teclado  note que usei o readonly esse comando server para bloquear o campo text  -->
	Senha :<input type="text" id="txtSenha"onfocus="mostrarTeclado( )"readonly="true" class="senha"/><br/>
		<!-- Teclado Virtual -->
	<div id="valor" style="display:none">
	
	<fieldset class="teclado">
		  <!-- Aqui os botoes do teclado virtual  note que o id dos botoes e sempre o mesmo  dentro dos botoes chamo as funcoes java script e a class botao que funciona corretamente em navegadores com css 3 mas tb coloquei um css no proprio botao para os navegadores mais antigos -->
	<input type="button" id="btn" value="7"onclick="pegarNumero(this)" class="botao"style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="8"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="9"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/><br/>
	<input type="button" id="btn" value="4"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="5"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="6"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/><br/>
	<input type="button" id="btn" value="1"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="2"onclick="pegarNumero(this)"class="botao"style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="3"onclick="pegarNumero(this)"class="botao" style="background-color:white;width:25px"/></br>
	<input type="button" id="btn" value="0"onclick="pegarNumero(this)"class="botao" style="background-color:white;width:25px"/>
	<input type="button" id="btn" value="<--------" style="background-color:white;width:55px;"/>
	</fieldset>
	</div>
	</form>
</body>